<template>
  <!-- 水位时，日变化图报表 -->
  <div class="hourdata">
    <div class="search">
      <div class="change_type">当日积水</div>
      <div class="time_name">时间选择：</div>
      <el-form :inline="true" :model="search">
        <el-form-item>
          <el-date-picker
            v-model="search.time"
            type="date"
            placeholder="选择时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="backgroundColor:#4E72C8;color:#fff" @click="getAddBook">查询</el-button>
          <el-button @click="empty" type="info">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="chart_list">
      <el-col :span="3" class="colleft">
        <div class="listbox">
          <ul class="listul">
            <li
              :class="selectId==v.id?'cur':''"
              v-for="v in pointListData"
              @click="getOne(v.stationName,v.id)"
              :key="v.id"
            >{{v.stationName}}</li>
          </ul>
        </div>
      </el-col>
      <el-col :span="21" class="colright">
        <div class="chartbox">
          <day-chart v-if="flag" :chart-data="dayPointChart"/>
           <div v-if="!flag" style="width:100%;height:520px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getTime } from "../../../utils/myMethod";
import DayChart from "./DayChart";

export default {
  name: "DayPoint",
  components: {
    DayChart
  },
  data() {
    return {
      search: {
        time: getTime(new Date())
      },
      flag: false,
      selectId: 1, //积水点当前id
      pointListData: [], //积水点列表
      pointName: "锦霞南区",
      dayPointChart: {}, //积水点日积水
    };
  },
  created() {
    this.getPointList();
    this.getDayChart();
  },
  methods: {
    getDayChart() {
      let _this = this;
      let time = _this.search.time;
      _this.$http
        .get("dataPonding/findByPondName", {
          params: {
            time: _this.search.time,
            dateType: "hours",
            name: this.pointName
          }
        })
        .then(res => {
          console.log(res, "day");
          let pointNameArr = [];
          let pondingDepthArr = [];
          let resData = res.data;
          let resLength = res.data.length;
          for (var i = 0; i < resLength; i++) {
            pointNameArr.push(resData[i].dateInt);
            pondingDepthArr.push(resData[i].pondingDepth);
          }
          this.dayPointChart.dataX = pointNameArr;
          this.dayPointChart.dataY = pondingDepthArr;
          if (resLength > 0) {
            this.flag = true;
          }
        });
    },
    getPointList() {
      this.$http
        .post("device/indexFindAll", {
          companyId: localStorage.getItem("companyId"),
          type: 4
        })
        .then(res => {
          this.pointListData = res.data;
          // console.log(this.pointListData);
        });
      // 默认显示第一条
      this.$http
        .get("device/findDeviceInfo", { params: { name: this.pointName } })
        .then(res => {
          if (res.data.length == 0) {
            return;
          }
          this.pointdetailInfo = res.data[0];
          console.log(this.pointdetailInfo, "22222222222");
        });
    },
    getOne(name, id) {
      this.pointName = name;
      this.selectId = id;
      this.flag = false;
      this.getDayChart();
    },
    //查询
    getAddBook() {
      console.log(this.search.time)
       this.flag = false;
      this.getDayChart();
    },
    //清空

    empty() {
      this.search = {
        time: getTime(new Date())
      };
      this.flag = false;
      this.getDayChart();
    }
  }
};
</script>

<style lang="less" scoped>
.hourdata {
  .search {
    display: flex;
    margin: 10px;
    padding-top: 10px;
    .change_type {
      height: 36px;
      line-height: 36px;
      margin-right: 20px;
      color: #4e72c8;
      font-weight: 600;

      font-size: 18px;
    }
    .time_name {
      height: 36px;
      font-size: 18px;
      line-height: 36px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .chart_list {
    .colleft {
      .listbox {
        .listul {
          width: 100%;
          height: 610px;
          overflow-y: auto;
        }
        ul > li {
          list-style: none;
          height: 38px;
          line-height: 38px;
          text-align: left;
          padding-left: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
          &:hover {
            background-color: rgba(189, 181, 238, 0.6);
          }
        }
      }
    }
    .colright {
      .chartbox {
      }
    }
  }
  #ehart1 {
    margin-top: 22px;
  }
}
.cur {
  background: #4e72c8;
  color: #fff;
}
</style>
